<template>
    <view class="main">
        <view class="top flex">
            <view class="top-left h" @click.stop="goToDetail">
                <view class="title">{{ orderItem?.stationName || '暂无名称' }}</view>
                <wd-icon name="arrow-right" class="icon" size="20px" color="#55946d" />
            </view>
            <view class="top-right">
                ¥{{ Number(orderItem?.price).toFixed(2) }}
            </view>
        </view>
        <view class="cp">{{ orderItem?.vehicleNo }}</view>
        <view class="bottom flex">
            <view class="bottom-left">
                {{ orderItem?.orderTime }}
            </view>
            <view class="bottom-right h" @click="payment()">
                <view class="status" :class="{ 'red': orderItem?.state == 1 }">{{ orderItem?.state == 1 ? '待支付' :
                    orderItem?.state == 3 ? '已完成' : '已取消' }}</view>
                <wd-icon class="icon" name="arrow-right" size="20px" color="#55946d" v-if="orderItem?.state == 1" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { throttle } from '@/utils/tools'
import { pay } from '@/api/apiList'

const props = defineProps({
    orderItem: {
        type: Object,
        default: () => { }
    }
})

const payment = throttle(async () => {
  const { orderNo } = props?.orderItem
  if(props?.orderItem.state == 1) {
    const res = await pay({ orderNo })
    if (res.code == 200) {
      uni.navigateTo({
        url: `/pages/mine/sqbPage?data=${JSON.stringify(res.data)}&item=${JSON.stringify(props.orderItem)}`
      })
    }
  }

}, 1000)

const goToDetail = () => {
    uni.navigateTo({
        url: `/pages/index/indexListDetail?stationNo=${props.orderItem?.stationNo}`
    })
}
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.h {
    display: flex;
    align-items: center;
}

.icon {
    margin-left: 10rpx;
}

.red {
    color: #e63324 !important;
    font-weight: 700 !important;
}

.main {
    padding: 20rpx;
    border: 1rpx solid #eee;
    margin-top: 10rpx;
    border-radius: 15rpx;

    .cp {
        margin: 25rpx 0;
        font-size: 23rpx;
    }

    .top {

        .top-left {
            .title {
                font-weight: 700;
                font-size: 29rpx;
            }
        }

        .top-right {
            font-weight: 700;
            font-size: 29rpx;
            color: #eaac3d;
        }
    }

    .bottom {
        .bottom-left {
            font-size: 26rpx;
            color: #555;
        }

        .bottom-right {
            font-size: 28rpx;
            color: #555;
        }
    }
}
</style>
